<template>
  <div :class="{ 'web-container': deviceType == 'web', 'mobile-container': deviceType == 'mobile' , 'ipad-container': deviceType == 'ipad'}">
    <div class="siteTitle">
      <div class="left">安世代</div>
      <div class="right">
        <div class="question">常見問題</div>
        <div class="service">客服中心</div>
      </div>
    </div>
    <!-- 重置密碼表单 -->
    <div class="content">
      <div class="register">
        <div class="registerBox">
          <div class="topTitle">重置密碼</div>
          <el-form
            ref="passwordForm"
            :model="passwordForm"
            :rules="passwordRules"
          >
            <el-form-item prop="userName">
              <el-input
                v-model="passwordForm.userName"
                placeholder="請輸入您的手機號碼"
              ></el-input>
            </el-form-item>
            <el-form-item prop="account">
              <el-input
                v-model="passwordForm.account"
                placeholder="請輸入驗證碼"
              >
                <span slot="suffix" class="code">获取验证码</span>
                <!-- <template #append>
                  <span class="code">获取验证码</span>
                </template> -->
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="passwordForm.password"
                placeholder="請輸入新密碼"
                show-password
              >
              </el-input>
            </el-form-item>
            <el-form-item prop="confirmPassword">
              <el-input
                v-model="passwordForm.confirmPassword"
                placeholder="請輸入確認密碼"
                show-password
              >
              </el-input>
            </el-form-item>
            <el-form-item>
              <div class="hint">
                <span>密碼6-20，位以字母開頭，可帶數字符號</span>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button class="submit" @click="onSubmit('passwordForm')"
                >下一步</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
export default {
  name: "Password",
  data() {
    return {
      // 绑定表单
      passwordForm: {
        userName: "",
        account: "",
        password: "",
        confirmPassword: "",
      },
      // 规则表单
      passwordRules: {
        userName: [
          { required: true, message: "请输入您的名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        account: [
          { required: true, message: "请输入您的账号", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        confirmPassword: [
          { required: true, message: "请确认密码", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    onSubmit(formName) {
      console.log(formName, "formName");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$router.push("login");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      console.log("submit!", this.registerForm);
    },
  },
};
</script> 
  
<style lang="scss" scoped>
.web-container {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f7;

  .siteTitle {
    padding: 60px 160px 54px 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      font-size: 50px;
      font-weight: 500;
      font-family: YujiBoku-Regular;
      color: #000000;
    }

    .right {
      font-weight: 500;
      font-size: 16px;
      color: #555555;
      display: flex;

      .question {
        margin-right: 30px;
        cursor: pointer;
      }

      .service {
        cursor: pointer;
      }
    }
  }

  .content {
    display: flex;
    justify-content: center;
    align-items: center;

    .register {
      width: 1166px;
      padding: 60px 0px 60px 0px;
      background: #ffffff;
      border-radius: 20px 20px 20px 20px;
      display: flex;
      justify-content: center;
      align-items: center;

      .registerBox {
        width: 436px;

        .topTitle {
          width: 100%;
          text-align: center;
          font-size: 50px;
          margin-bottom: 37px;
        }

        .hint {
          font-weight: 500;
          font-size: 14px;
          color: #999999;
        }

        .submit {
          width: 100%;
          height: 50px;
          background-color: #870c08;
          color: #ffffff;
          border-radius: 50px;
        }

        .code {
          padding: 11px 18px 11px 0px;
          color: #666666;
          cursor: pointer;
        }
      }
    }
  }
}
</style>